@{
    Layout = "~/Shared/_layoutattn.cshtml";
    var PageTitle = "Create Attendance Sheet";
}
@section title
{
 @PageTitle;
}   
<html lang="en">
<head>
<title></title>
    <style>
         #a1{margin-left:400px;
            margin-top:10px;
        } 
        
         #main{margin-left:100px;
            
        } 
          #av
    {
       margin-right:400px;
             margin-top:10px;
             margin-bottom:50px;
             margin-left:52px;
        
    } 
    

       table, th, td {
         border: solid 1px #bbbbbb;
         border-collapse: collapse;
         padding: 2px;
       }
    </style>

    <script src="/Scripts/jquery-1.8.2.js" type="text/javascript"></script>
    <script src="/Scripts/jquery-ui.js" type="text/javascript"></script>

<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
  <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<script type="text/javascript">

    $(document).ready(function () {

        $('#d1').hide();
        $('#d2').hide();
        $('#d3').hide();
        $('#d4').hide();
        $('#d5').hide();
        $('#d6').hide();
        $("#av").change(function () {
            var text = $("#av option:selected").text();
            if ($("#av option:selected").val() == "ByDay") {
                alert($(this).val());
                $('#d1').show();
                $('#d2').hide();
                $('#d3').hide();
            }
            if ($("#av option:selected").val() == "ByWeek") {
                alert($(this).val());
                $('#d2').show();
                $('#d1').hide();
                $('#d3').hide();
            }
            if ($("#av option:selected").val() == "ByMonth") {
                alert($(this).val());
                $('#d3').show();
                $('#d1').hide();
                $('#d2').hide();
            }
        });

    });
    function Next1() {
        $('#d4').show();
        $('#d3').hide();
        $('#d5').hide();
        $('#d6').hide();
    }
    function Next2() {
        $('#d5').show();
        $('#d4').hide();
        $('#d3').hide();
        $('#d6').hide();
    }
    function Next3() {
        $('#d6').show();
        $('#d3').hide();
        $('#d4').hide();
        $('#d5').hide();

    }
    function Back1() {
        $('#d3').show();

        $('#d4').hide();
        $('#d5').hide();
        $('#d6').hide();
    }
    function Back2() {
        $('#d4').show();
        $('#d3').hide();

        $('#d5').hide();
        $('#d6').hide();
    }
    function Back3() {
        $('#d5').show();
        $('#d3').hide();
        $('#d4').hide();

        $('#d6').hide();
    }
</script>

   
</head>
<body>
    <link rel="stylesheet" type="text/css" href="~/Styles/template.css" media="screen">
<script>
    function Back() {
        window.location = "/CreateAttendanceSheet/MarkAttendance";
    }
</script>
    <div id="content"><h2 style="text-align: center;"><b>Teacher Attendance View</b></h2><br/></div>


 <select name="SelectView" id="av">
  <option value="Default"selected="selected">Select view : </option>
    <option value="ByDay">By day</option>
    <option value="ByWeek">By week</option>
     <option value="ByMonth">By Month</option>
    </select>
    <div id="main">
<form action="StudentView" method="post">
<div id="d1">
<p>By Day</p>
  <table>
  
    <thead>
        <tr>
        <th>Date</th>
            <th>Attendance</th>
            
              </tr>
    </thead>
    <tbody>
    
     <tr><td>1/1/13</td><td>P</td></tr>
     <tr><td>2/1/13</td><td>A</td></tr>
    </tbody>
   </table>
   <input type="button" value="Edit" class="buttonSave" />
   </div>
   <div id="d2">
   <h2>By Week</h2>
    <p>week1</p>
    <table border="1">

    <thead>
        
        <tr>
            <th>RollNo</th><th>1/1/13</th><th>2/1/13</th><th>3/1/13</th><th>4/1/13</th><th>5/1/13</th>
           
        </tr>
        <tr>
        <th></th><th>Monday</th><th>Tuesday</th><th>Wednesday</th><th>Thursday</th><th>Friday</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Bsef09a011</td><td>P</td><td>P</td><td>A</td><td>P</td>
            <td>P</td>
        </tr>
    </tbody>
</table>
<input type="button" value="Edit" class="buttonSave" />
<input type="button" value="Next" class="buttonSave"/>
    <input type="button" value="Back"  class="buttonSave" onclick="back()"/>
</div>
    <div id="d3">
    <p>Week1</p>
     <table border="1">

    <thead>
        
        <tr>
            <th>RollNo</th><th>1/1/13</th><th>2/1/13</th><th>3/1/13</th><th>4/1/13</th><th>5/1/13</th>
           
        </tr>
        <tr>
        <th></th><th>Monday</th><th>Tuesday</th><th>Wednesday</th><th>Thursday</th><th>Friday</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Bsef09a011</td><td>P</td><td>P</td><td>A</td><td>P</td>
            <td>P</td>
        </tr>
    </tbody>
</table>
<input type="button" value="Next" id="n1" class="buttonSave" onclick="Next1()" />
    <input type="button" value="Back" id="b1" class="buttonSave" onclick="back()"/>
    <input type="button" value="Edit" class="buttonSave" /></div>
       <div id="d4">
        <p>Week2</p>
     <table border="1">

    <thead>
        
        <tr>
            <th>RollNo</th><th>8/1/13</th><th>9/1/13</th><th>10/1/13</th><th>11/1/13</th><th>12/1/13</th>
           
        </tr>
        <tr>
        <th></th><th>Monday</th><th>Tuesday</th><th>Wednesday</th><th>Thursday</th><th>Friday</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Bsef09a011</td><td>P</td><td>P</td><td>A</td><td>P</td>
            <td>P</td>
        </tr>
    </tbody>
</table>
<input type="button" value="Next" id="n2" class="buttonSave" onclick="Next2()" />
    <input type="button" value="Back" id="b2" class="buttonSave" onclick="back1()"/>
    <input type="button" value="Edit" class="buttonSave" /></div>
    <div id="d5">
        <p>Week3</p>
     <table border="1">

    <thead>
        
        <tr>
            <th>RollNo</th><th>15/1/13</th><th>16/1/13</th><th>17/1/13</th><th>18/1/13</th><th>19/1/13</th>
           
        </tr>
        <tr>
        <th></th><th>Monday</th><th>Tuesday</th><th>Wednesday</th><th>Thursday</th><th>Friday</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Bsef09a011</td><td>P</td><td>P</td><td>A</td><td>P</td>
            <td>P</td>
        </tr>
    </tbody>
</table>
<input type="button" value="Next" id="n3" class="buttonSave" onclick="Next3()"/>
    <input type="button" value="Back" id="b3" class="buttonSave" onclick="back2()"/>
    <input type="button" value="Edit" class="buttonSave" /></div>
         <div id="d6">
        <p>Week4</p>
     <table border="1">

    <thead>
        
        <tr>
            <th>RollNo</th><th>22/1/13</th><th>23/1/13</th><th>24/1/13</th><th>25/1/13</th><th>26/1/13</th>
           
        </tr>
        <tr>
        <th></th><th>Monday</th><th>Tuesday</th><th>Wednesday</th><th>Thursday</th><th>Friday</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Bsef09a011</td><td>P</td><td>P</td><td>A</td><td>P</td>
            <td>P</td>
        </tr>
    </tbody>
</table>

    <input type="button" value="Back" id="b4" class="buttonSave" onclick="back()"/>
             <input type="button" value="Edit" class="buttonSave" />
 
  </form></div>
     <div><input type="button" value="Back" class="buttonSave" onclick="Back()"  style="    margin-left: -44px;  margin-top: -34px;"/></div>
   

</body>
</html>



    